<!DOCTYPE html>
<html>
  <head>
    <title>Move.js - CSS3 animation framework for JavaScript</title>
    <style>
      body {
        padding: 50px;
        font: 14px/1.5 "helvetica neue", helvetica, arial, sans-serif;
        color: #8b8b8b;
      }
      h1, h2, h3 {
        font-size: 33px;
        font-weight: normal;
        color: #333;
        -webkit-font-smoothing: antialiased;
      }
      h2 {
        display: none;
        font-size: 33px;
      }
      h3 {
        padding: 5px 0;
        font-size: 18px;
        border-bottom: 3px solid #eee;
      }
      .box {
        margin: 5px;
        border: 1px solid #888;
        font-size: 11px;
        text-align: center;
        line-height: 50px;
      }
      .small {
        width: 50px;
        height: 50px;
      }
      a {
        color: #00B5E2;
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline;
      }
      .sandbox {
        margin: 10px 0;
        padding: 5px;
        border: 1px solid #eee;
      }
      .source {
        font-family: monaco, monospace;
        font-size: 12px;
        color: #999;
      }
      .example p {
        color: #333;
      }
      .example p code {
        color: #999;
        padding: 2px 5px;
        border: 1px solid #eee;
        -webkit-border-radius: 3px;
      }
      #example-1 .box,
      #example-2 .box,
      #example-3 .box {
        margin-left: 100px;
      }
    </style>
  </head>
  <body>
    <h1>Move.js</h1>
    <p>Move.js is a small JavaScript library making CSS3 backed animation
    extremely simple and elegant.</p>

    <h2>Examples</h2>

    <a href="https://github.com/visionmedia/move.js"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>

    <div id="examples">
      <div id="example-1" class="example">
        <h3>Move#set(prop, val)</h3>
        <p>Set <em>prop</em> to <em>val</em>.</p>
        <a href="#" class="play">Play</a>
        <div class="sandbox">
          <div class="box small"></div>
        </div>
        <pre class="source">
          <code>
move('#example-1 .box')
  .set('margin-left', 200)
  .end();
          </code>
        </pre>
      </div>

      <div id="example-2" class="example">
        <h3>Move#add(prop, val)</h3>
        <p>Increment <em>prop</em> by <em>val</em>, where <em>val</em>
          is an Number (click several times).</p>
        <a href="#" class="play">Play</a>
        <div class="sandbox">
          <div class="box small"></div>
        </div>
        <pre class="source">
          <code>
move('#example-2 .box')
  .add('margin-left', 200)
  .end();
          </code>
        </pre>
      </div>

      <div id="example-3" class="example">
        <h3>Move#sub(prop, val)</h3>
        <p>Decrement <em>prop</em> by <em>val</em>, where <em>val</em>
          is an Number (click several times).</p>
        <a href="#" class="play">Play</a>
        <div class="sandbox">
          <div class="box small"></div>
        </div>
        <pre class="source">
          <code>
move('#example-3 .box')
  .sub('margin-left', 100)
  .end();
          </code>
        </pre>
      </div>

      <div id="example-4" class="example">
        <h3>Move#rotate(deg)</h3>
        <p>Rotate by <em>deg</em>.</p>
        <a href="#" class="play">Play</a>
        <div class="sandbox">
          <div class="box small"></div>
        </div>
        <pre class="source">
          <code>
move('#example-4 .box')
  .rotate(140)
  .end();
          </code>
        </pre>
      </div>

      <div id="example-5" class="example">
        <h3>Move#duration(n)</h3>
        <p>Set animation duration to <em>n</em> which is a
          Number or a string such as "4s".</p>
        <a href="#" class="play">Play</a>
        <div class="sandbox">
          <div class="box small"></div>
        </div>
        <pre class="source">
          <code>
move('#example-5 .box')
  .set('background-color', 'blue')
  .duration('2s')
  .end();
          </code>
        </pre>
      </div>

      <div id="example-6" class="example">
        <h3>Move#translate(x[, y])</h3>
        <p>Translate <em>x</em> and optionally <em>y</em> axis. Aliased as <code>Move#to(x[, y])</code>.</p>
        <a href="#" class="play">Play</a>
        <div class="sandbox">
          <div class="box small"></div>
        </div>
        <pre class="source">
          <code>
move('#example-6 .box')
  .translate(300, 80)
  .end();
          </code>
        </pre>
      </div>

      <div id="example-7" class="example">
        <h3>Move#x(n) / Move#y(n)</h3>
        <p>Translate <em>x</em> or <em>y</em> axis. Aliased by <code>Move#translateX(n)</code> and <code>Move#translateY(n)</code>.</p>
        <a href="#" class="play">Play</a>
        <div class="sandbox">
          <div class="box small"></div>
        </div>
        <pre class="source">
          <code>
move('#example-7 .box')
  .x(300)
  .y(20)
  .end();
          </code>
        </pre>
      </div>

      <div id="example-8" class="example">
        <h3>Move#skew(x[, y])</h3>
        <p>Skew <em>x</em>, and optionally <em>y</em>. <code>Move#skewX(n)</code> and <code>Move#skewY(n)</code> are also available.</p>
        <a href="#" class="play">Play</a>
        <div class="sandbox">
          <div class="box small"></div>
        </div>
        <pre class="source">
          <code>
move('#example-8 .box')
  .x(300)
  .skew(50)
  .set('height', 20)
  .end();
          </code>
        </pre>
      </div>

      <div id="example-9" class="example">
        <h3>Move#scale(x[, y])</h3>
        <p>Scale the <em>x</em>, and optionally <em>y</em> axis. <code>Move#scaleX(n)</code> and <code>Move#scaleY(n)</code> are also available.</p>
        <a href="#" class="play">Play</a>
        <div class="sandbox">
          <div class="box small"></div>
        </div>
        <pre class="source">
          <code>
move('#example-9 .box')
  .scale(3)
  .end();
          </code>
        </pre>
      </div>

      <div id="example-10" class="example">
        <h3>Move#ease(fn)</h3>
        <p>Use the given easing <code>fn</code>.</p>
        <a href="#" class="play">Play</a>
        <div class="sandbox">
          <div class="box box1 small">default</div>
          <div class="box box2 small">in</div>
          <div class="box box3 small">out</div>
          <div class="box box4 small">in-out</div>
          <div class="box box5 small">snap</div>
          <div class="box box6 small">(0,1,1,0)</div>
        </div>
        <pre class="source">
          <code>
move('#example-10 .box1').x(400).end();
move('#example-10 .box2').ease('in').x(400).end();
move('#example-10 .box3').ease('out').x(400).end();
move('#example-10 .box4').ease('in-out').x(400).end();
move('#example-10 .box5').ease('snap').x(400).end();
move('#example-10 .box6').ease('cubic-bezier(0,1,1,0)').x(400).end();

setTimeout(function(){
  move('#example-10 .box1').x(0).end();
  move('#example-10 .box2').x(0).end();
  move('#example-10 .box3').x(0).end();
  move('#example-10 .box4').x(0).end();
  move('#example-10 .box5').x(0).end();
  move('#example-10 .box6').x(0).end();
}, 1200);
          </code>
        </pre>
      </div>

      <div id="example-11" class="example">
        <h3>Move#end([fn])</h3>
        <p>The <code>end()</code> method triggers the animation
          to play, optionally invoking the callback <em>fn</em> when complete.</p>
        <a href="#" class="play">Play</a>
        <div class="sandbox">
          <div class="box small"></div>
        </div>
        <pre class="source">
          <code>
move('#example-11 .box')
  .set('background-color', 'red')
  .duration(1000)
  .end(function(){
    move('#example-11 .box')
      .set('background-color', 'white')
      .end();
  });
          </code>
        </pre>
      </div>

      <div id="example-12" class="example">
        <h3>Move#delay(n)</h3>
        <p>Set animation delay to <em>n</em> which is a
          Number or a string such as "4s".</p>
        <a href="#" class="play">Play</a>
        <div class="sandbox">
          <div class="box small"></div>
        </div>
        <pre class="source">
          <code>
move('#example-12 .box')
  .set('background-color', 'blue')
  .delay('2s')
  .end();
          </code>
        </pre>
      </div>

      <div id="example-13" class="example">
        <h3>Move#then([fn])</h3>
        <p>Defer an action such as invoking a <em>fn</em>,
          <code>end()</code>ing the given <code>Move</code> instance,
          or returning a clone for chaining. The <code>Move#pop()</code> method is used to return the current <code>Move</code> instance's parent in the chain.</p>
        <a href="#" class="play">Play</a>
        <div class="sandbox">
          <div class="box small"></div>
          <div class="box box2 small"></div>
        </div>
        <pre class="source">
          <code>
var moveBack = move('#example-13 .box')
  .set('background-color', 'white')
  .x(0);

move('#example-13 .box')
  .set('background-color', 'red')
  .x(500)
  .then(moveBack)
  .end();

move('#example-13 .box2')
  .set('background-color', 'red')
  .x(500)
  .scale(.5)
  .rotate(60)
    .then()
      .rotate(30)
      .scale(1.5)
      .set('border-radius', 5)
      .set('background-color', 'white')
      .then()
        .set('opacity', 0)
        .pop()
      .pop()
  .end();
          </code>
        </pre>
      </div>

      <div class="example">
        <h3>move.select(selector)</h3>
        <p>This function is used throughout move to select elements. For
          example if we wanted to utilize jQuery, we could re-define
          this function as shown below.</p>
        <pre class="source">
          <code>
move.select = function(selector){
  return $(selector).get(0);
};
          </code>
        </pre>
      </div>

      <div class="example">
        <h3>move.defaults</h3>
        <p>Defaults used throughout Move, simply re-define to apply a new default.</p>
        <pre class="source">
          <code>
move.defaults = {
  duration: 500
};
          </code>
        </pre>
      </div>

      <div class="example">
        <h3>move.ease</h3>
        <p>Easing function map, used by <code>Move#ease()</code> to
          allow for <code>move('foo').ease('in')</code> etc.</p>
        <pre class="source">
          <code>
move.ease = {
    'in': 'ease-in'
  , 'out': 'ease-out'
  , 'in-out': 'ease-in-out'
  , 'snap': 'cubic-bezier(0,1,.5,1)'
};
          </code>
        </pre>
      </div>

      <div class="example">
        <h3>move.version</h3>
        <p>The library version in the form "MAJOR.MINOR.PATCH".</p>
        <pre class="source">
          <code>
move.version = "n.n.n";
          </code>
        </pre>
      </div>

    <script src="../move.js"></script>
    <script>

      function $(selector) {
        return document.querySelectorAll(selector)[0];
      }

      function play(example, fn) {
        $('#example-' + example + ' .play').addEventListener('click', function(e){
          e.preventDefault();
          fn();
        }, false);
      }

      // example 1
      play(1, function(){
        move('#example-1 .box')
          .set('margin-left', 200)
          .end();
      });

      // example 2
      play(2, function(){
        move('#example-2 .box')
          .add('margin-left', 200)
          .end();
      });

      // example 3
      play(3, function(){
        move('#example-3 .box')
          .sub('margin-left', 100)
          .end();
      });

      // example 4
      var e4 = move('#example-4 .box');
      play(4, function(){
        e4.rotate(140).end();
      });

      // example 5
      play(5, function(){
        move('#example-5 .box')
          .set('background-color', 'blue')
          .duration(2000)
          .end();
      });

      // example 6
      play(6, function(){
        move('#example-6 .box')
          .translate(300, 80)
          .end();
      });

      // example 7
      play(7, function(){
        move('#example-7 .box')
          .x(300)
          .y(20)
          .end();
      });

      // example 8
      play(8, function(){
        move('#example-8 .box')
          .x(300)
          .skew(50)
          .set('height', 20)
          .end();
      });

      // example 9
      play(9, function(){
        move('#example-9 .box')
          .scale(3)
          .end();
      });

      // example 10
      play(10, function(){
        move('#example-10 .box1').x(400).end();
        move('#example-10 .box2').ease('in').x(400).end();
        move('#example-10 .box3').ease('out').x(400).end();
        move('#example-10 .box4').ease('in-out').x(400).end();
        move('#example-10 .box5').ease('snap').x(400).end();
        move('#example-10 .box6').ease('cubic-bezier(0,1,1,0)').x(400).end();

        setTimeout(function(){
          move('#example-10 .box1').x(0).end();
          move('#example-10 .box2').x(0).end();
          move('#example-10 .box3').x(0).end();
          move('#example-10 .box4').x(0).end();
          move('#example-10 .box5').x(0).end();
          move('#example-10 .box6').x(0).end();
        }, 1200);
      });

      play(11, function(){
        move('#example-11 .box')
          .set('background-color', 'red')
          .duration(1000)
          .end(function(){
            move('#example-11 .box')
              .set('background-color', 'white')
              .end();
          });
      });

      // example 12
      play(12, function(){
        move('#example-12 .box')
          .set('background-color', 'blue')
          .delay('2s')
          .end();
      });

      // example 13
      play(13, function(){
        var moveBack = move('#example-13 .box')
          .set('background-color', 'white')
          .x(0);

        move('#example-13 .box')
          .set('background-color', 'red')
          .x(500)
          .then(moveBack)
          .end();

        move('#example-13 .box2')
          .set('background-color', 'red')
          .x(500)
          .scale(.5)
          .rotate(60)
            .then()
              .rotate(30)
              .scale(1.5)
              .set('border-radius', 5)
              .set('background-color', 'white')
              .then()
                .set('opacity', 0)
                .pop()
              .pop()
          .end();
      });
    </script>
    </div>
  </body>
</html>
